@charset "utf-8";

/************ 元素可见性 ************/
/* 设置元素隐藏，但占位 */
#first{
	/*visibility: hidden;*/
}
/* 给 table 设置 border 方便观察 */
/* 隐藏表格的列和行，但不占位，chrome 和 opera 不支持 */ 
table tr:first-child{
	/*visibility: collapse;*/
}
/************ 元素盒类型 ************/
/* 将行内元素转成块级元素 */
span{
	/*background: silver;
	width: 100px;
	height: 200px;
	display: block;*/
}

/* 将块级元素转成行内元素 */
div{
	/*background: silver;
	width: 200px;
	height: 100px;
	display: inline;*/
}

/* 将块级元素转为行内-块元素 */
#c{
	/*background-color: blue;
	width: 200px;
	height: 100px;
	display: inline-block;*/
}

#d{
	/*background-color: red;
	width: 200px;
	height: 100px;
	display: inline-block;*/
}

#e{
	/*background-color: green;
	width: 200px;
	height: 100px;
	display: inline-block;*/
}

/* 将原隐藏且不占位 */
#c{
	/*display: none;*/
}
/************ 元素的浮动 ************/
#c{
	background-color: blue;
	width: 200px;
	height: 100px;
	float: left;
}

#d{
	background-color: red;
	width: 200px;
	height: 100px;
	float: right;
}

#e{
	/*background-color: green;
	width: 200px;
	height: 100px;
	float: none;*/
}
/* 清除浮动 */
#e{
	background-color: green;
	width: 200px;
	height: 100px;
	clear: both;
}
